<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>项目库</title>
		<link rel="stylesheet" type="text/css" href="assets/css/comm.css" />
		<link rel="stylesheet" type="text/css" href="assets/js/src/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="assets/css/navigation.css" />
		<link rel="stylesheet" type="text/css" href="assets/css/ProjectLibrary.css" />
	</head>

	<body>
		<div class="container">
			<div class="navigation before">
			</div>
			<div class="content">
				<header class="">
					<div class="left">
            <img class="logo ahref" src="assets/images/departmental-charge/logo.svg">
						<h1 class="gap active">成本项目</h1>
						<h1><a href="construction-project.html">基建项目</a></h1>
            <div class="search" style="border-right: 0;margin-left: 16px; ">
							<div class="year">
								<p style="border-left: 1px solid #C9CDD4;padding-left: 16px;" >年度：</p>
                  <!-- <input type="text" name="" id="year1" value="2023" disabled="disabled" readonly  unselectable="on" /> -->
                  <div id="year1"> 2023 <div class="inputMask"></div></div>
							</div>
              <!-- <div class="inputMask"></div> -->
							<div class="section2">
								<p>任务号：</p>
								<div class="sector" >
									<div class="">
										<span></span>
									</div>
								</div>
								<div class="options" >
								
								</div>
							</div>
						</div>
						<time></time>
					</div>
					<div class="right">
						<div class="tabbar">
							<a class="active" href="javascript:;">成本项目</a>
							<a href="ProjectCard.html">项目卡片</a>
							<a href="income.html">收入</a>
							<a href="expenditure.html">支出</a>
						</div>
					</div>
				</header>
				<div class="wrapper" style="padding:16px;">
          <div class="ProjectLibrary-content">
            <!-- 收入 支出 EMIS -->
            <div class="PLcont-top">
              
            </div>
            <!-- 任务号-应收金额/到款金额 + 八大成本占比 -->
            <div class="PLcont-two">
              <div>
                <h4>任务号-应收金额/到款金额</h4>
                <div id="rwhyingshouMoney"></div>
              </div>
              <div>
                <h4>八大成本占比</h4>
                <div style="display: flex;align-items: center;">
                  <div id="badachengben" style="width: 44%; height: 300px;"></div>
                  <div class="legend" style="display: flex;">
                    <!-- <div>
                      <div class="item-list">
                        <div class="item" style="border-left: 4px solid #165DFF;"> 原材料成本 </div>
                        <div class="item-num">40 <span>%</span></div>
                      </div>
                    </div>
                    <div>
                      <div class="item-list">
                      <div class="item" style="border-left: 4px solid #165DFF;"> 原材料成本 </div>
                      <div class="item-num">40 <span>%</span></div>
                    </div>
                    </div>
                    <div>
                      <div class="item-list">
                        <div class="item" style="border-left: 4px solid #165DFF;"> 原材料成本 </div>
                        <div class="item-num">40 <span>%</span></div>
                      </div>
                    </div>
                    <div>
                      <div class="item-list">
                      <div class="item" style="border-left: 4px solid #165DFF;"> 原材料成本 </div>
                      <div class="item-num">40 <span>%</span></div>
                    </div>
                    
                    
                      
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
            <!-- 任务号-实际/计划支出金额 + 部门-实际/计划支出金额 -->
            <div class="PLcont-two">
              <div>
                <h4>任务号-实际/计划支出金额</h4>
                <div id="rwhshijiMoney"></div>
              </div>
              <div>
                <h4>部门-实际/计划支出金额</h4>
                <div id="bmshijiMoney"></div>
              </div>
            </div>
            <!-- 年度实际支出 + 年度-EMIS计划完成数/计划数 + 年度-结算收入/结算成本 -->
            <div class="PLcont-three">
              <div>
                <h4>年度实际支出</h4>
                <div id="nianduSJ"></div>
              </div>
              <div>
                <h4>年度-EMIS计划完成数/计划数</h4>
                <div id="nianduEMIS"></div>
              </div>
              <div>
                <h4>年度-结算收入/结算成本</h4>
                <div id="nianduJS"></div>
              </div>
            </div>
            <div class="PLcont-table">
              <div>
                <div style="display: flex; justify-content: space-between;">
                  <h4>明细表</h4>
                  <p style="font-size: 12px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #86909C;line-height: 20px;"> (金额单位：万元) </p>
                </div>
               
                <div class="typical_content">
                  <table id="newsList" lay-filter="newsList"></table>
                </div>
                <div id="laypage"></div>
              </div>
            </div>
          </div>
          <!-- 遮罩层1 -->
          <div class="All-IncomingPayment-Mask">
          <div class="All-IncomingPayment-Mask-Content">
            <div class="chatrts-content" style="display: flex; justify-content: space-between;">
              <h3 id="maskName"></h3>
              <div onclick="MaskClose()"><img style="width: 16px; height: 16px;cursor: pointer;" src="../cl/assets/images/mask/close.png" alt="关闭"></div>
            </div>
            <div>
              <div id="mask-chatrts" style="width: 100%; height: 90%;">
                <div class="typical_content">
                  <table id="newsListMask" lay-filter="newsListMask"></table>
                </div>
                <div id="laypageMask"></div>
              </div>
            </div>

          </div>
          </div>
				</div>
			</div>
		</div>
		<script src="assets/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="assets/js/http/api.js" type="text/javascript" charset="utf-8"></script>
		<script src="assets/js/test.js" type="text/javascript" charset="utf-8"></script>
		<script src="assets/plugins/chartlib.js" type="text/javascript"></script>
		<script src="assets/plugins/comm.js" type="text/javascript" charset="utf-8"></script>
		<script src="assets/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="assets/js/src/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="assets/js/navigation.js" type="text/javascript" charset="utf-8"></script>
		<script src="assets/js/ProjectLibrary.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>
